<template>
  <view>
    <u-navbar
      title=""
      :safeAreaInsetTop="true"
      :autoBack="false"
      :placeholder="false"
      @leftClick="goto"
      leftIconSize="0"
      leftIconColor="#ffffff"
      :titleStyle="{ color: '#ffffff' }"
      :bgColor="bgColor"
    >
      <view
        class="u-nav-slot text-white font-26 flex align-center"
        slot="right"
      >
        <image
          src="/static/my/setting.png"
          mode="widthFix"
          class="img-w-48 img-h-45"
          @click="toSetting"
        ></image>
      </view>
    </u-navbar>
    <view class="head color-b">
      <view class="flex p-l-40">
        <view>
          <image
            :src="userInfo.head"
            mode="widthFix"
            class="img-100 radius-25 bg-white"
          ></image>
        </view>
        <view>
          <view class="margin-left" v-if="userInfo">
            <view class="font-38 text-bold flex align-center maxWidth">{{
              userInfo.nickname
            }}</view>
            <view class="m-t-10" v-if="userInfo.advertLevelName">
              <text class="level">{{ userInfo.advertLevelName }}</text>
            </view>
            <view class="font-26 m-t-10"
              >邀请码：{{ userInfo.salt }}
              <text class="copy-btn" @click="copyCode">复制</text></view
            >
            <view class="font-26 m-t-10">邀请人：{{ userParCount }}人</view>
          </view>
          <view
            class="flex justify-center font-32 align-center margin-left"
            v-else
            @click="toLogin"
            >点击前往登录</view
          >
        </view>
      </view>
    </view>
    <view
      class="margin-lr bg-white radius-5 text-center padding-tb-lg shadow m-t-20"
    >
      <view class="flex">
        <view
          class="flex-sub"
          style="border-right: 2rpx solid #cccccc"
          @click="toWallet(3, '商城余额')"
        >
          <view class="font-40 text-bold">{{ userInfo.balance || 0 }}</view>
          <view class="margin-top-sm" style="color: #808080">余额</view>
        </view>
        <view class="flex-sub" @click="toWallet(0, '积分钱包')">
          <view class="font-40 text-bold">{{ userInfo.freeze || 0 }}</view>
          <view class="margin-top-sm" style="color: #808080">待到账</view>
        </view>
      </view>
    </view>

    <!-- 广告 -->
    <view
      class="margin-lr margin-top radius-5 flex flex-col-center justify-between bg-white p-20"
    >
      <view class="flex align-center p-t-10 p-b-10">
        <view class="font-44 color-yellow font-b m-r-10">
          <u-icon name="play-circle-fill" color="#ECA52B" size="28"></u-icon>
        </view>
        <view class="font-32 color-b font-b">任务区</view>
      </view>
      <view
        class="color-w bg-yellow taskBox text-center m-r-10"
        @click="hanlderTask"
        >进入</view
      >
    </view>

    <view class="bg-white radius-5 margin">
      <view class="flex justify-between align-center padding-lr padding-tb">
        <view class="text-black font-32 text-bold">我的订单</view>
        <view
          class="flex align-center text-black9 font-24"
          @click="toOrderList(0)"
        >
          <view>全部订单</view>
          <u-icon name="arrow-right" color="#999999" size="13"></u-icon>
        </view>
      </view>
      <view
        class="flex text-center padding-top-xs padding-bottom text-black3 font-26"
      >
        <view
          class="flex-sub position-r"
          @click="toOrderList(item.status)"
          v-for="(item, index) in dataOrderList"
          :key="index"
        >
          <u-badge
            v-if="item.count"
            class="badgeBox"
            type="warning"
            :value="Number(item.count)"
          ></u-badge>
          <view class="flex justify-center">
            <image
              :src="item.img"
              mode="widthFix"
              class="img-w-50 img-h-47"
            ></image>
          </view>
          <view class="margin-top-xs">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <view class="margin-lr margin tool-box">
      <view class="flex flex-wrap">
        <view
          class="w-25 flex justify-center align-center flex-direction margin-tb-sm"
          v-for="(item, index) in fromDataCenter ? dataList : list"
          :key="index"
          @click="onLink(item)"
        >
          <view>
            <image
              :src="item.icon"
              mode="widthFix"
              :class="[item.width, item.height]"
            ></image>
          </view>
          <view class="margin-top-xs text-black3 font-26">{{ item.name }}</view>
        </view>
      </view>
    </view>

    <!-- 广告收益 -->
    <view class="bg-content radius-5 margin" v-if="fromDataCenter">
      <view class="flex justify-between align-center padding-lr padding-tb">
        <view class="text-black font-32 text-bold">广告收益</view>
      </view>
      <view
        class="flex text-center padding-top-xs padding-bottom text-black3 font-26"
      >
        <view class="flex-sub" @click="hanlderTask">
          <view class="text-center">{{ pointAcountData.adPoints || 0.0 }}</view>
          <view class="margin-top-xs">广告积分</view>
        </view>
        <view class="flex-sub">
          <view class="text-center">{{
            pointAcountData.yesterdayIncome || 0.0
          }}</view>
          <view class="margin-top-xs">昨日收益</view>
        </view>
        <view class="flex-sub">
          <view class="text-center">{{
            pointAcountData.monthIncome || 0.0
          }}</view>
          <view class="margin-top-xs">本月收益</view>
        </view>
        <view class="flex-sub">
          <view class="text-center">{{
            pointAcountData.totalIncome || 0.0
          }}</view>
          <view class="margin-top-xs">累计收益</view>
        </view>
      </view>
    </view>

    <!-- 卡通数据中心 -->
    <u-popup
      class="openDataCenter"
      mode="center"
      bgColor="transparent"
      :safeAreaInsetBottom="false"
      :show="show"
    >
      <view class="sign-box">
        <image
          src="@/static/img/index/open-data-center.png"
          class="sign-image-bg"
        />
        <view class="sign-title">———— 数据中心开通 ————</view>
        <view class="sign-flex">
          <u--input
            class="inputPhone"
            placeholder="请输入开通手机号"
            border="surround"
            v-model="phoneNum"
          />
        </view>
        <view class="sign-btn">
          <image
            src="@/static/img/index/sign-ok-btn.png"
            class="sign-image-btn"
          />
          <view class="sign-btn-view" @tap="signTap">确认开通</view>
        </view>
        <view class="sign-close">
          <image src="@/static/img/index/close-img.png" @tap="show = false" />
        </view>
      </view>
    </u-popup>

    <!-- 视频签到 广告签到收益规则 -->
    <u-popup
      mode="center"
      :show="tipsShow"
      bgColor="transparent"
      :cancelShow="false"
    >
      <view class="upgrade-box upgrade-box0">
        <view class="content-box">
          <view class="date w-100 text-center font-36 font-b color-b"
            >广告收益规则</view
          >
          <image
            class="upgrade-box-bg"
            src="@/static/discountCoupon/advertising-tips-bg.png"
            mode=""
          ></image>
          <view class="content">
            <view class="font-26 p-b-30 pre-text">
              <scroll-view class="tips-text" scroll-y>
                <view
                  class="m-b-10"
                  v-for="(item, index) in advertisingList"
                  :key="index"
                  >{{ item }}</view
                >
              </scroll-view>
            </view>
          </view>
          <view class="btn bg-yellow" @tap="tipsShow = false">我知道了</view>
        </view>
      </view>
    </u-popup>

    <!-- 点击做任务弹窗 -->
    <u-popup
      mode="center"
      :show="advertisingShow"
      bgColor="transparent"
      :cancelShow="false"
    >
      <view class="upgrade-box upgrade-box0">
        <view
          class="content-box content-box1 p-l-30 p-r-30 p-t-20 p-b-20 border-box"
        >
          <image
            class="upgrade-box-bg"
            src="@/static/discountCoupon/advertising-bg01.png"
            mode=""
          />
          <view class="font-16 font-b m-b-5 datas p-l-30 p-r-30"
            >每月推荐1人注册且累计消费50元,即可解锁看广告赚钱收益</view
          >
          <view class="m-t-20 font-13 m-b-10 text-center">
            推荐注册：{{ advertisingData.inviteCount || 0 }}/1</view
          >
          <view class="progress">
            <u-line-progress
              :percentage="advertisingData.inviteCountPercentage"
              activeColor="#e60000"
              :inactiveColor="
                advertisingData.inviteCountPercentage == 100
                  ? '#e60000'
                  : '#ffffff'
              "
              :showText="false"
              height="18"
            />
          </view>
          <view class="m-t-10 font-13 m-b-10 text-center">
            当前解锁进度：已消费{{ advertisingData.paidAmount || 0 }}元
          </view>
          <view class="progress">
            <u-line-progress
              :percentage="advertisingData.paidAmountPercentage"
              activeColor="#e60000"
              :inactiveColor="
                advertisingData.paidAmountPercentage == 100
                  ? '#e60000'
                  : '#ffffff'
              "
              :showText="false"
              height="18"
            />
          </view>
          <view class="flex justify-between btn-box">
            <view
              class="color-w font-15 bg-red1 text-center boxR"
              @tap="advertisingShow = false"
              >退出</view
            >
            <view
              class="color-w font-15 bg-red1 text-center boxR"
              @tap="advertisingShow = false"
              >{{
                advertisingData.inviteCount < 1
                  ? "推荐注册解锁"
                  : "继续消费解锁"
              }}</view
            >
          </view>
        </view>
      </view>
    </u-popup>

    <!-- 提示 -->
    <u-popup
      mode="center"
      :show="openAdvert"
      bgColor="transparent"
      :cancelShow="false"
    >
      <view class="upgrade-box upgrade-box0">
        <view class="content-box position-r">
          <image
            class="upgrade-box-bg b-r-10"
            src="@/static/xyc/adverting.jpg"
            mode=""
          ></image>
          <div class="position-a IKown flex flex-row-center w-100">
            <view class="btn font-28 bg-yellow line-h-50" @tap="tipsClick"
              >我知道了</view
            >
          </div>
        </view>
      </view>
    </u-popup>

    <!-- #ifdef APP-PLUS -->
    <view class="padding text-center font-28 text-black6"
      >当前版本：{{ versionCodeApp }}</view
    >
    <!-- #endif -->
    <!-- #ifdef H5 -->
    <view class="padding text-center font-28 text-black6"
      >当前版本：{{ versionInfo.versionName }}</view
    >
    <!-- #endif -->
  </view>
</template>

<script>
import { productArea } from "@/common/api/product.js";
import {
  customerInfo,
  wallet,
  integralWarning,
  orderTotal,
  openPopup,
} from "@/common/api/customer.js";
import { lastVersion, openDataCenterAjax } from "@/common/api/api.js";
import { totalConsumption } from "@/common/api/order.js";
import config from "@/common/config/config.js";
import onlineServiceMixin from "@/common/mixins/onlineServiceMixin.js";
import { totalIncome } from "@/common/api/exchange.js";
import { Debounce } from "@/common/utils/tools.js";
import {
  getMonthTask,
  checkAdsSetting,
  checkAdsAccount,
} from "@/common/api/advertising.js";
export default {
  mixins: [onlineServiceMixin],
  data() {
    return {
      userParCount: 0,
      walletData: {},
      list: [
        {
          name: "优惠券",
          icon: "/static/xyc/daifukuan.png",
          url: "/pages/my/advertising/couponExchange",
          type: 3,
          width: "img-w-50",
          height: "img-h-50",
        },
        {
          name: "收货地址",
          icon: "/static/xyc/dizhiguanli.png",
          url: "/pages/my/address/addressList",
          type: 0,
          width: "img-w-50",
          height: "img-h-50",
        },
        {
          name: "我要邀请",
          icon: "/static/xyc/yaoqingma.png",
          url: "/pages/my/invite",
          type: 0,
          width: "img-w-50",
          height: "img-h-48",
        },
        {
          name: "切换账号",
          icon: "/static/xyc/qiehuanzhanghao.png",
          url: "/pages/login/login",
          type: 3,
          width: "img-w-50",
          height: "img-h-50",
        },
      ],
      dataList: [
        {
          name: "消费团队",
          icon: "/static/my/team.png",
          url: "/pages/my/service/teamPerformance",
          type: 0,
          width: "img-w-62",
          height: "img-h-50",
        },
        {
          name: "服务商",
          icon: "/static/my/personal.png",
          url: "/pages/my/service/serviceIndex",
          type: 0,
          width: "img-w-46",
          height: "img-h-50",
        },
        {
          name: "团队排名",
          icon: "/static/my/rank.png",
          url: "/pages/my/ranking/team",
          type: 0,
          width: "img-w-50",
          height: "img-h-51",
        },
      ],
      bgColor: "transparent",
      userInfo: {},
      walletInfo: {},
      versionInfo: {},
      versionCodeApp: "",
      fromDataCenter: false,
      consumptionInfo: {},

      wv: "",
      show: false,
      phoneNum: null,
      tipsShow: false, //广告规则提示
      advertisingData: {}, //是否激活广告
      advertisingShow: false,
      advertisingList: [], //规则
      pointAcountData: {}, //收益

      InsufficientShow: false, //积分不足提示弹窗
      msg: null, //积分不足提示
      dataOrderList: [
        {
          name: "待付款",
          img: "/static/xyc/daifukuan.png",
          count: 0,
          status: 1,
        },
        {
          name: "待发货",
          img: "/static/xyc/daifahuo.png",
          count: 0,
          status: 2,
        },
        { name: "待收货", img: "/static/xyc/yifahuo.png", count: 0, status: 3 },
        {
          name: "已收货",
          img: "/static/xyc/yishouhuo.png",
          count: 0,
          status: 4,
        },
        { name: "售后", img: "/static/xyc/shouhou.png", count: 0, status: 5 },
      ],
      openAdvert: false,
    };
  },
  onLoad(options) {
    this.fromDataCenter =
      uni.getStorageSync("fromDataCenter") || options.fromDataCenter;
    if (options.token) {
      this.$store.commit("setLogin", {
        token: options.token,
      });
    }
    if (options.tradeToken) {
      uni.setStorageSync("tradeToken", options.tradeToken);
    }
    // #ifdef APP-PLUS
    this.versionCodeApp = plus.runtime.version;
    let currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效
    setTimeout(() => {
      this.wv = currentWebview.children()[0];
    }, 1000);
    // #endif
  },
  mounted() {
    //广告的提示
    uni.$on("advertisingShowChange", (res) => {
      this.advertisingData = res;
      this.advertisingShow = true;
    });
  },
  onShow() {
    uni.setStorageSync("payAlipay", false);
    uni.setStorageSync("payWechat", false);
    this.getCustomerInfo();
    // this.getWallet()
    this.getOrderTotal();
    this.getLastVersion();
    // this.getTotalConsumption()
    // this.getTotalIncome()
    // this.getCheckAdsSetting()//规则
    // this.getPointAccount()//账户收益
    // this.checkPoint()
  },
  onPageScroll(e) {
    if (e.scrollTop > 44) {
      this.bgColor = "#1D1D20";
    } else {
      this.bgColor = "transparent";
    }
  },
  // 下拉刷新
  onPullDownRefresh() {
    this.getCustomerInfo();
    // this.getWallet()
    // 关闭下拉刷新
    setTimeout(() => {
      uni.stopPullDownRefresh();
    }, 800);
  },

  methods: {
    // 点击提示
    tipsClick() {
      setTimeout(() => {
        this.openAdvert = false;
      }, 600);
      openPopup().then((res) => {
        if (res.code == 200) {
          this.getCustomerInfo();
        }
      });
    },
    // 获取订单数量
    getOrderTotal() {
      orderTotal().then((res) => {
        if (res.code == 200) {
          this.dataOrderList[0].count = res.data.status1;
          this.dataOrderList[1].count = res.data.status2;
          this.dataOrderList[2].count = res.data.status3;
          this.dataOrderList[3].count = res.data.status4;
          this.dataOrderList[4].count = res.data.status5;
        }
      });
    },
    // 积分不足告警
    checkPoint() {
      integralWarning().then((res) => {
        if (res.code == 200) {
          let toast = uni.getStorageSync("toastInfo");
          if (res.msg && toast) {
            this.msg = res.msg;
            this.InsufficientShow = true;
          }
        }
      });
    },
    //广告收益
    getPointAccount() {
      checkAdsAccount().then((res) => {
        if (res.code === 200) {
          this.pointAcountData = res.data;
        }
      });
    },
    // 广告规格
    getCheckAdsSetting() {
      checkAdsSetting().then((res) => {
        this.advertisingList = res.data;
      });
    },
    // 先判断是否已经解锁，解锁才跳转到观看视频页面
    hanlderTask() {
      if (this.userInfo.popUp) {
        this.openAdvert = true;
      } else {
        uni.navigateTo({
          url: "/pages/my/advertising/advertising",
        });
      }
      // 先去掉等级判断
      // if(this.userInfo.advertLevel > 0){
      // 	if(this.userInfo.popUp){
      // 		this.openAdvert = true
      // 	}else{
      // 		uni.navigateTo({
      // 			url: '/pages/my/advertising/advertising'
      // 		})
      // 	}
      // }else{
      // 	this.$msg('请先购物解锁广告任务')
      // 	setTimeout(() => {
      // 		productArea().then(async res => {
      // 			if(res.code == 200){
      // 				this.dataListArea = res.data
      // 				let adverting = res.data.filter(item => item.advertising)[0];
      // 				uni.navigateTo({
      // 					url: '/pages/product/productListZone?areaId=' + adverting.areaId +'&title='+adverting.areaName
      // 				})
      // 			}
      // 		})
      // 	},1000)
      // }
    },
    //查看规则
    tipsShowChange() {
      this.tipsShow = true;
    },
    // 跳转
    goTo(url) {
      uni.navigateTo({
        url: url,
      });
    },
    // 获取平台积分
    getTotalIncome() {
      totalIncome({ walletId: 12 }).then((res) => {
        if (res.code === 200) {
          this.walletData = res.data;
        }
      });
    },
    // 开通数据中心
    signTap: Debounce(function () {
      if (!this.phoneNum) {
        this.$msg("请输入要开通手机号");
        return;
      }
      uni.showLoading({
        mask: true,
      });
      let parmas = {
        userPhone: this.phoneNum,
      };
      openDataCenterAjax(parmas).then((res) => {
        uni.hideLoading();
        if (res.code == 200) {
          this.show = false;
          this.phoneNum = null;
          this.$msg(res.msg);
        } else {
          this.$msg(res.msg);
        }
      });
    }, 800),
    goto() {
      // #ifdef H5
      uni.webView.postMessage({
        data: {
          action: true,
        },
      });
      // #endif

      // #ifdef APP_PLUS
      this.wv.evalJS(`appScan('899999')`);
      // #endif
    },
    toPool() {
      uni.navigateTo({
        url: "/pages/my/dividendPool/dividendPoolIndex",
      });
    },
    handlePoints() {
      let points = (
        (this.walletInfo.shopPoints || 0) +
        (this.walletInfo.buyGoodCoupon || 0) +
        (this.walletInfo.centesimal || 0)
      ).toFixed(2);
      if (points == 0.0) {
        return 0;
      } else {
        return points;
      }
    },
    leftClick() {
      console.log("44444");
    },
    getTotalConsumption() {
      totalConsumption().then((res) => {
        this.consumptionInfo = res.data || {};
      });
    },
    toSetting() {
      uni.navigateTo({
        url: "/pages/my/setting/setting",
      });
    },
    // 登录交易平台
    loginTrade(linkUrl) {
      let params = {
        loginId: this.userInfo.mobile,
        loginType: "auto_login",
        password: "",
        thirdUserId: this.userInfo.userId,
        nickName: this.userInfo.nickName,
        userFrom: 1,
        merchantFlag: this.userInfo.userType == 1 ? true : false,
      };
      uni.request({
        method: "POST",
        url: config.env.tradeUrl + "/oauth/login",
        dataType: "string", //1.先将dataType设置为string
        data: params,
        header: {
          cookiew: uni.getStorageSync("mem_token"),
          tenantId: 1,
        },
        success: (res) => {
          let json = res.data.replace(/:s*([0-9]{15,})s*(,?)/g, ': "$1" $2');
          //2.根据后端返回的数据调用一次或者两次replace替换
          let json1 = json.replace(/:s*([0-9]{15,})s*(,?)/g, ': "$1" $2');
          //3.手动转换回json数据即可
          let trueData = JSON.parse(json1);
          if (trueData.code == 200) {
            uni.setStorageSync("tradeToken", trueData.data.token);
            if (uni.getStorageSync("tradeToken")) {
              uni.navigateTo({
                url: linkUrl,
              });
            }
          } else {
            this.$msg(trueData.msg);
            if (trueData.msg != "不允许重复提交，请稍候再试") {
              uni.removeStorageSync("tradeToken");
            } else {
              if (uni.getStorageSync("tradeToken")) {
                uni.navigateTo({
                  url: linkUrl,
                });
              }
            }
          }
        },
      });
    },
    getLastVersion() {
      lastVersion(1).then((res) => {
        if (res.code == 200) {
          this.versionInfo = res.data || {};
          // 清除webview缓存
          if (
            this.versionInfo.versionCode != uni.getStorageSync("ycwmVersion")
          ) {
            uni.setStorageSync("ycwmVersion", this.versionInfo.versionCode);
            // #ifdef APP-PLUS
            plus.cache.clear();
            // #endif
          }
        }
      });
    },
    toLogin() {
      uni.navigateTo({
        url: "/pages/login/login",
      });
    },
    toWallet(walletType, title) {
      if (walletType == 0) {
        uni.navigateTo({
          url: "/pages/my/wallet/freezeRecords",
        });
      } else if (walletType == 7) {
        uni.navigateTo({
          url:
            "/pages/my/wallet/walletRecords?walletType=" +
            7 +
            "&title=消费明细&incomeFlag=" +
            false,
        });
        // uni.navigateTo({
        // 	url: '/pages/my/coupon/eBayCoupon'
        // })
      } else if (walletType == 9) {
        //服务中心业绩
        uni.navigateTo({
          url: "/pages/serviceCenter/expenseLog",
        });
      } else if (walletType == 3) {
        //商城余额
        uni.navigateTo({
          url: "/pages/my/wallet/mallBalance?walletType=" + walletType,
        });
      } else {
        uni.navigateTo({
          url:
            "/pages/my/wallet/walletRecords?walletType=" +
            walletType +
            "&title=" +
            title,
        });
      }
    },
    toOrderList(index) {
      uni.navigateTo({
        url: "/pages/order/orderList?tabIndex=" + index,
      });
    },
    // 获取用户信息
    getCustomerInfo() {
      customerInfo().then((res) => {
        this.userParCount = res.data.parCount || 0;
        this.userInfo = res.data.user || {};
        this.$store.commit("user/setUserInfo", res.data.user || {});
      });
    },
    // 获取用户钱包
    getWallet() {
      wallet().then((res) => {
        this.walletInfo = res.data || {};
        console.log("res", res);
      });
    },
    // 点击
    onLink(item) {
      if (item.name == "切换账号") {
        uni.clearStorageSync();
        uni.setStorageSync("agreementBool", true);
        uni.reLaunch({
          url: item.url,
        });
      } else if (item.name == "开通数据中心") {
        this.show = true;
      } else if (item.name == "流转平台") {
        this.loginTrade(item.url);
      } else {
        uni.navigateTo({
          url: item.url,
        });
      }
    },
    copyCode() {
      let that = this;
      uni.setClipboardData({
        data: this.userInfo.salt,
        success: function () {
          that.$msg("复制成功");
        },
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background: #f2f2f2;
}
</style>
<style lang="scss" scoped>
.IKown {
  bottom: 0;
  left: 0;
  display: flex;
  justify-content: center;
}
.upgrade-box-bg {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
}
.taskBox {
  min-width: 140rpx;
  border-radius: 50rpx;
  height: 50rpx;
  // margin-top: 15rpx;
  line-height: 50rpx;
}
.mBox {
  margin-top: -20rpx;
}
.boxs {
  padding-bottom: 0rpx !important;
}
.maxWidth {
  max-width: 350rpx;
}
.head {
  // width: 100%;
  // background: linear-gradient(-7deg,#f74d16,#b40a00);
  // padding: 120rpx 14rpx 50rpx 14rpx;
  width: 100%;
  padding-top: 200rpx;
  padding-bottom: 100rpx;
  background-image: url("/static/xyc/myBgImg.png");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  box-sizing: border-box;

  .level {
    background: linear-gradient(-90deg, #ff9701 0%, #ffb21f 100%);
    color: #ffffff;
    font-size: 24rpx;
    padding: 2rpx 20rpx;
    border-radius: 6rpx;
    margin-right: 20rpx;
    min-width: 96rpx;
    text-align: center;
  }

  .copy-btn {
    border: 2rpx solid #000;
    font-size: 20rpx;
    padding: 2rpx 10rpx;
    margin-left: 20rpx;
    border-radius: 6rpx;
  }
}
.cart-list {
  .cart-item {
    width: 335rpx;
    height: 174rpx;
    background: #f3ece2;
    border-radius: 10rpx;
    margin-bottom: 20rpx;
    color: #7a4e2a;
    display: flex;
    align-items: center;
    padding-left: 10rpx;
    font-size: 28rpx;
    font-weight: bold;

    .img-box {
      width: 90rpx;
      height: 90rpx;
      background: #ffffff;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
.tool-box {
  background: #ffffff;
  border-radius: 10rpx;
}
// ===================数据中心===================
.openDataCenter {
  .inputPhone {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: 10rpx;
    border: 2rpx solid #f1f1f1;
    background-color: #fff;
    font-size: 28rpx;
    color: #333;
    padding: 0 20rpx;
    box-sizing: border-box;
    height: 80rpx;
    line-height: 80rpx;
    text-align: left;
    margin-top: 80rpx;
  }
  .sign-box {
    position: relative;
    top: -100rpx;

    .sign-image-bg {
      width: 612rpx;
      height: 826rpx;
      display: block;
    }

    .sign-title {
      position: absolute;
      text-align: center;
      width: 612rpx;
      top: 266rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 24rpx;
      color: #333333;
    }

    .sign-btn {
      position: absolute;
      top: 750rpx;
      left: 50%;
      transform: translateX(-50%);

      .sign-image-btn {
        width: 272rpx;
        height: 108rpx;
        display: block;
      }

      .sign-btn-view {
        position: absolute;
        text-align: center;
        line-height: 100rpx;
        top: 0rpx;
        left: 50%;
        transform: translateX(-50%);
        width: 272rpx;
        height: 108rpx;
        font-size: 32rpx;
        font-weight: 500;
        color: #ffffff;
        text-shadow: 0rpx 6rpx 6rpx #4c4c4c;
      }
    }

    .sign-close {
      position: absolute;
      top: 880rpx;
      left: 50%;
      transform: translateX(-50%);

      image {
        width: 64rpx;
        height: 64rpx;
        display: block;
      }
    }

    .sign-flex {
      position: absolute;
      width: 432rpx;
      top: 300rpx;
      left: 50%;
      transform: translateX(-50%);
      display: flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;

      .sign-list {
        position: relative;
        margin-top: 58rpx;

        &:nth-child(1 + 4) {
          margin-top: 30rpx;
        }

        width: calc(432rpx / 4);

        .sign-small-bg {
          width: 96rpx;
          height: 64rpx;
          display: block;
          margin: auto;
        }

        .sign-text {
          position: absolute;
          top: 0;
          left: 50%;
          transform: translateX(-50%);
          width: 96rpx;
          height: 64rpx;
          line-height: 64rpx;
          text-align: center;
          font-size: 26rpx;
          font-weight: 500;
          color: #ffffff;
        }

        .sign-check {
          position: absolute;
          width: 32rpx;
          height: 32rpx;
          display: block;
          right: 0;
          bottom: -16rpx;
        }
      }
    }
  }
}

.pre-text {
  white-space: pre-wrap;
}
.upgrade-box {
  width: 600rpx;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;

  .content-box {
    width: 100%;
    height: 828rpx;
    position: relative;
    z-index: 1;

    .boxTips {
      margin-top: 460rpx;
    }

    .upgrade-box-bg {
      width: 100%;
      height: 100%;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1;
    }

    .date {
      position: absolute;
      top: 280rpx;
      font-size: 60rpx;
    }
    .datas {
      margin-top: 350rpx;
    }

    .title {
      color: #000;
    }

    .takeaway {
      font-size: 50rpx;
      color: #ed6400;
      font-weight: bold;
    }

    .content {
      overflow: auto;
      box-sizing: border-box;
      padding: 0 40rpx;
      margin-top: 400rpx;
      line-height: 40rpx;
    }

    .btn {
      border-radius: 30rpx;
      padding: 14rpx 58rpx;
      width: max-content;
      color: #fff;
      margin: 20rpx auto 20rpx auto;
    }

    .btn-box {
      display: flex;
      justify-content: space-between;
      margin-top: 30rpx;

      > view {
        border-radius: 30rpx;
        padding: 12rpx 50rpx;
      }

      .btn {
        margin: 0;
      }

      .btn-border {
        border: 1px solid #eca52b;
        color: white;
      }
      .boxR {
        border-radius: 10rpx;
      }
    }
  }
  .content-box1 {
    height: 912rpx !important;
  }
}
.tips-text {
  height: 262rpx;
}
.cancel-btn {
  width: 232rpx;
  text-align: center;
  height: 78rpx;
  line-height: 78rpx;
  background: #ff1a1a;
  border-radius: 12rpx;
  margin: 30rpx auto 0 auto;
}
.circleBox {
  right: -15rpx;
  top: -10rpx;
  position: absolute;
}
.bg-content {
  background: linear-gradient(180deg, #ffe6e6 0%, #ffffff 100%);
}
.badgeBox {
  position: absolute;
  top: -20rpx;
  right: 20rpx;
}
</style>
